import $ from 'jquery'
$.fn.extend({
    ChatSocket: function () {
        var ChatSocket = this;
        var idChat = $(ChatSocket).attr('id');
        var defaults = {
            Room: "RoomDeveloteca",
            pass: "1234",
            lblTitulChat: " Chat Develoteca.com ",
            lblCampoEntrada: "Message",
            lblEnviar: "Send",
            textoAyuda: "Develoteca",
            Nombre: "Anónimo",
            urlImg: "http://placehold.it/50/55C1E7/fff&text=U",
            btnEntrar: "btnEntrar",
            btnEnviar: "btnEnviar",
            lblBtnEnviar: "Enter",
            lblTxtEntrar: "txtEntrar",
            lblTxtEnviar: "txtMensaje",
            lblBtnEntrar: "Enter",
            idDialogo: "DialogoEntrada",
            classChat: "",
            idOnline: "ListaOnline",
            lblUsuariosOnline: "Users joined",
            lblEntradaNombre: "Name:",
            panelColor: "success"
        };
        var opciones = $.extend({}, defaults);
        var ws;
        var Room = opciones.Room;
        var pass = opciones.pass;
        var textoAyuda = opciones.textoAyuda;
        var Nombre = window.localStorage.name; // 修改为固定的名字

        var urlImg = opciones.urlImg;
        var btnEntrar = opciones.btnEntrar;
        var btnEnviar = opciones.btnEnviar;
        var lblTxtEntrar = opciones.lblTxtEntrar;
        var lblTxtEnviar = opciones.lblTxtEnviar;
        var idDialogo = opciones.idDialogo;
        var classChat = opciones.classChat;
        var idOnline = opciones.idOnline;
        var panelColor = opciones.panelColor;
        if ($('#' + idOnline).length == 0) {
            idOnline = idChat + "listaOnline";
            $('#' + idChat).append('<br/><div id="' + idOnline + '"></div>');

        }



        function IniciarConexion () {
            var conex = '{"setID":"' + Room + '","passwd":"' + pass + '"}';
            ws = new WebSocket("ws://achex.ca:4010");
            ws.onopen = function () {
                ws.send(conex);
            }
            ws.onmessage = function (Mensajes) {
                var MensajesObtenidos = Mensajes.data;
                var obj = $.parseJSON(MensajesObtenidos);
                AgregarItem(obj);
                if (obj.sID != null) {
                    if ($('#' + obj.sID).length == 0) {
                        $('#listaOnline').append('<li class="list-group-item" id="' + obj.sID +
                            '"><span class="label label-success">&#9679;</span> - ' + obj.Nombre +
                            '</li>');
                    }
                }
            }
            ws.onclose = function () {
                alert("Conexión cerrada");
            }
        }
        IniciarConexion();

        function iniciarChat () {
            $('#' + idDialogo).hide();
            $('#' + idOnline).show();
            CrearChat();
            UsuarioOnline();
            getOnline();
        }

        function CrearEntrada () {
            $('#' + idChat).append('<div id="' + idDialogo + '" class="' + classChat +
                '" id="InputNombre"><div class="panel-footer" style="margin-top:100px;"><button id="' + btnEntrar +
                '" class="btn btn-success btn-lg">' + '开始聊天' +
                '</button></div></div>');
            $('#' + idOnline).append(' <div class="panel panel-' + panelColor +
                '"><div class="panel-heading"><span class="glyphicon glyphicon-user"></span> ' +
                '在线用户' +
                '</div><div class="panel-body"><ul class="list-group" id="listaOnline"></ul></div><div class="panel-footer"><div class="input-group"><div><h3>聊天室</h3></div></span></div></div></div>'
            );
            $("#" + lblTxtEntrar).keyup(function (e) {
                if (e.keyCode == 13) {
                    iniciarChat();
                }
            });
            $("#" + btnEntrar).click(function () {
                iniciarChat();
            });
        }

        function CrearChat () {
            $('#' + idChat).append('<div class="' + classChat + '"><div class="panel panel-' + panelColor +
                '"><div class="panel-heading"><span class="glyphicon glyphicon-comment"></span>' +
                '当前用户' + " : " + Nombre +
                '<div class="btn-group pull-right"><button type="button" onclick="alert(\'' +
                textoAyuda +
                '\')" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-chevron-down"></span></button></div></div><div class="panel-body"><ul class="chatpluginchat"></ul></div><div class="panel-footer"><div class="input-group"><input id="' +
                lblTxtEnviar + '" type="text" class="form-control input-sm" placeholder="' +
                '请输入内容' +
                '" /><span class="input-group-btn"><button  class="btn btn-warning btn-sm" id="' +
                btnEnviar + '">' + '发送' +
                '</button></span></div></div></div></div><li class="left clearfix itemtemplate" style="display:none"><span class="chat-img pull-left"><img src="' +
                urlImg +
                '" alt="User Avatar" class="img-circle" id="Foto"/></span><div class="chat-body clearfix"><div class="header"><strong class="primary-font" id="Nombre">Nombre</strong><small class="pull-right text-muted"><span class="glyphicon glyphicon-asterisk"></span><span id="Tiempo">12 mins ago</span></small></div> <p id="Contenido">Contenido</p></div></li>'
            );
            $("#" + lblTxtEnviar).keyup(function (e) {
                if (e.keyCode == 13) {
                    EnviarMensaje();
                }
            });
            $("#" + btnEnviar).click(function () {
                EnviarMensaje();
            });
        }

        function EnviarMensaje () {
            ws.send('{"to":"' + Room + '","Nombre":"' + Nombre + '","Contenido":"' + $('#' + lblTxtEnviar)
                .val() + '"}');
            $("#" + lblTxtEnviar).val('');
        }

        function UsuarioOnline () {
            ws.send('{"to":"' + Room + '","Nombre":"' + Nombre + '"}');
        }

        function AgregarItem (Obj) {
            if ((Obj.Contenido != null) && (Obj.Nombre != null)) {
                $(".itemtemplate").clone().appendTo(".chatpluginchat");
                $('.chatpluginchat .itemtemplate').show(10);
                $('.chatpluginchat .itemtemplate #Nombre').html(Obj.Nombre);
                $('.chatpluginchat .itemtemplate #Contenido').html(Obj.Contenido);
                var formattedDate = new Date();
                var d = formattedDate.getUTCDate();
                var m = formattedDate.getMonth();
                var y = formattedDate.getFullYear();
                var h = formattedDate.getHours();
                var min = formattedDate.getMinutes();
                var Fecha = d + "/" + m + "/" + y + " " + h + ":" + min;
                $('.chatpluginchat .itemtemplate #Tiempo').html(Fecha);
                $('.chatpluginchat .itemtemplate').removeClass("itemtemplate");
            }
        }
        $('#' + idDialogo).addClass('chat-container');
        $('#' + idOnline).addClass('online-users');
        $('#' + btnEntrar).addClass('start-chat-button');

        function getOnline () {
            setInterval(UsuarioOnline, 3000);
        }

        CrearEntrada();
        /* 只在移动端展示样式 */
        $('#' + idDialogo).addClass('chat-container');
        $('#' + idOnline).addClass('online-users');
        $('#' + btnEntrar).addClass('start-chat-button');

        $('.chat-container').css({
            'font-family': 'Arial, sans-serif',
            'max-width': '600px',
            'margin': '0 auto',
            'padding': '20px',
            'border': '1px solid #e5e5e5',
            'border-radius': '5px',
            'box-shadow': '0 0 10px rgba(0, 0, 0, 0.1)'
        });

        $('.online-users').css({
            'list-style-type': 'none',
            'padding': '0',
            'margin': '0'
        });

        $('.start-chat-button').css({
            'background-color': '#4caf50',
            'color': 'white',
            'border': 'none',
            'padding': '10px 20px',
            'text-align': 'center',
            'text-decoration': 'none',
            'display': 'block',
            'width': '100%',
            'font-size': '16px',
            'margin-top': '20px',
            'cursor': 'pointer',
            'border-radius': '5px',
            'transition': 'background-color 0.3s'
        });

        $('.start-chat-button:hover').css({
            'background-color': '#45a049'
        });


        // Fin
    }
});
